<template>
  <div class="detail">
    <!-- <hm-nav-bar
      title="文章详情"
      :path="path"
      right="&#xe608;"
      @rightClick="share"
    ></hm-nav-bar> -->
    <div class="content" v-if="info">
      <div class="title">{{ info.title }}</div>
      <div class="author">
        <div class="f1">
          <img src="@/assets/long.png" alt="" />
        </div>
        <div class="f2">
          <div class="nickname">{{ info.aut_name }}</div>
          <div class="time">{{ info.pubdata | formatTime }}</div>
        </div>
        <div class="f3">
          <van-button
            color="#3296fa"
            text-color="#fff"
            @click="followClick(info.is_followed)"
            >{{ info.is_followed ? '已关注' : `+   关注` }}</van-button
          >
        </div>
      </div>
      <div class="txt" v-html="info.content"></div>
    </div>
    <div class="like" v-if="info">
      <h3 class="like_top">猜你喜欢</h3>
      <div class="like_item">
        <div>微信小程序</div>
        <div>微信小程序</div>
      </div>
      <div class="like_item">
        <div>微信小程序</div>
        <div>微信小程序</div>
      </div>
      <div class="like_item">
        <div>微信小程序</div>
        <div>微信小程序</div>
      </div>
    </div>
    <div class="btn" v-if="info">
      <van-button
        :class="{ like_icon: info.attitude === 1 }"
        @click="likeClick()"
        ><i class="iconfont">&#xe650;</i>点赞</van-button
      >
      <van-button :class="{ like_icon: info.attitude === -1 }" @click="unlike()"
        ><i class="iconfont">&#xe607;</i>不喜欢</van-button
      >
    </div>
    <div class="commentss" id="chatContent">
      <van-list
        v-if="bol"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <div
          class="comment"
          :id="'chat' + index"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="image left">
            <van-image class="imageitem" :src="item.aut_photo">
              <template v-slot:error>
                <img class="code" src="@/assets/long.png" alt="" />
              </template>
            </van-image>
          </div>
          <div class="right">
            <div class="r1">
              <div class="r1-name">{{ item.aut_name }}</div>
              <div class="liks" @click="likeclick(item, item.is_liking, index)">
                <van-icon name="like-o" :class="{ color: item.is_liking }" />
                {{ item.like_count }}
              </div>
            </div>
            <div class="r2">
              {{ item.content }}
            </div>
            <div class="r3">
              <div class="r3-date">{{ item.pubdate | formatTime }}</div>
              <div class="r3-page" @click="brnclcik(item, index)">
                {{ item.reply_count }}回复
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="bottom">
      <div class="firld">
        <div class="f1" @click="popupclck">
          <div class="f1-inpit">请发表评论</div>
        </div>
        <div class="f2">
          <van-icon
            @click="likeClick"
            :class="{ like_icon: info.attitude === 1 }"
            name="like-o"
          />
        </div>
        <div class="f3">
          <van-icon :badge="list.length ? list.length : ''" name="comment-o" />
        </div>
        <div class="f4">
          <van-icon @click.native="showShare = true" name="share-o" />
        </div>
      </div>
    </div>
    <div class="popup">
      <van-popup v-model="pop_up" position="bottom" :style="{ height: '35%' }">
        <van-field v-model.trim="sms" rows="6" type="textarea"> </van-field>
        <div class="p2">
          <van-button size="normal" color="#3296fa" @click="addcommit"
            >发送</van-button
          >
        </div>
      </van-popup>
    </div>
    <critic
      :listss="list"
      :index="index"
      :item="connitxq"
      :idd="id"
      @amend="onamend"
      v-model="show"
      @likediss="likedi"
    ></critic>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
      class="copy"
    />
    <van-icon
      v-show="top > 300"
      name="back-top"
      class="back_top"
      @click.native="backTop"
    />
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import { articleDetail, apiZan, apiDiszan, apiDislike } from '@/api/search.js'
import {
  apiGetUser,
  apiGetComment,
  apiAddComment,
  apiAddCommentlikings,
  apiAddCommentlikingsID
} from '@/api/comment.js'
import { getLocal } from '@/utils/local.js'
import critic from './critic'
export default {
  components: {
    critic
  },
  data () {
    return {
      loading: false,
      finished: false,
      sms: '',
      show: false,
      connitxq: '',
      bol: true,
      index: -1,
      pop_up: false,
      message: '',
      list: [],
      offset: undefined,
      limit: 11,
      top: '',
      info: '',
      showShare: false,
      id: '',
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ],
      path: this.$route.query.redirect
    }
  },
  created () {
    // document.title = this.$route.meta.title
    this.id = this.$route.params.article_id
    articleDetail(this.id).then(res => {
      console.log(res)
      this.info = res.data
    })
  },
  mounted () {
    window.addEventListener('scroll', this.getScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.getScroll)
  },
  methods: {
    // 不喜欢
    async unlike () {
      if (this.info.attitude === -1) {
        const res = await apiDislike(this.id)
        this.info.attitude = 0
        console.log(res)
        this.$toast.success('取消成功')
      } else if (this.info.attitude === 0) {
        this.info.attitude = -1
        this.$toast.success('不喜欢')
      } else {
        this.$toast.success('不喜欢')
        this.info.attitude = -1
      }
    },
    // 对文章点赞
    async likeClick () {
      // 有token 则可以点赞
      if (getLocal('token')) {
        if (this.info.attitude === 1) {
          this.info.attitude = 0
          const res = await apiDiszan(this.id)
          console.log(res)
        } else {
          this.info.attitude = 1
          const res = await apiZan(this.id)
          console.log(res)
          this.$toast.success('点赞成功')
        }
      } else {
        this.token()
      }
    },
    getScroll () {
      this.top =
        document.body.scrollTop ||
        document.documentElement.scrollTop ||
        window.pageYOffset
    },
    backTop () {
      const timeTop = setInterval(() => {
        this.top -= 100
        window.scrollTo(0, this.top)
        if (this.top <= 0) {
          clearInterval(timeTop)
        }
      }, 1)
    },
    share () {
      this.showShare = true
    },
    onSelect (option) {
      this.showShare = false
      if (option.name === '复制链接') {
        var clipboard = new Clipboard('.copy', {
          text: function () {
            return window.location.href
          }
        })
        clipboard.on('success', () => {
          this.$toast('链接复制成功')
        })
      } else {
        this.$toast(option.name)
      }
    },
    // 关注用户
    async followClick (bol) {
      if (!getLocal('token')) {
        this.token()
      }
      if (!bol) {
        this.info.is_followed = true
      } else {
        this.info.is_followed = false
      }
    },
    // 点击弹出回复评论界面
    brnclcik (item, index) {
      this.show = true
      this.connitxq = item
      this.index = index
    },
    // 评论自动加载事件
    async onload () {
      const res = await apiGetComment({
        artid: +this.id,
        offset: this.offset,
        limit: this.limit
      })
      this.list.push(...res.data.results)
      if (res.data.results.length === 0) {
        this.offset = undefined
      } else {
        this.offset = res.data.last_id
      }

      this.loading = false
      if (this.list.length === res.data.total_count) {
        this.finished = true
      }
      // console.log(res)
    },
    // 点击发送按钮事件
    async addcommit () {
      this.token()
      console.log(this.id)
      if (this.sms.length !== 0) {
        const res = await apiAddComment({
          artid: this.id,
          content: this.sms
        })
        this.loading = false
        this.offset = undefined
        this.finished = false
        this.limit = 11
        this.list = []
        this.sms = ''
        this.bol = false
        this.pop_up = false
        console.log(res)

        document.getElementById('chatContent').scrollIntoView()
        this.$nextTick(() => {
          this.bol = true
          const ss =
            document.getElementById('chat1') ||
            document.getElementById('chatContent')
          ss.scrollIntoView(true, {
            behavior: 'smooth',
            block: 'end',
            inline: 'nearest'
          })
        })
      }
    },
    // 子组件评论被点赞事件
    async likedi (item) {
      // console.log(item)
      this.likeclick(item, item.is_liking, this.index)
      this.token()
    },
    async popupclck () {
      if (this.$store.state.isLogin) {
        this.pop_up = true
      } else if (getLocal('token')) {
        const res = await apiGetUser()
        this.$store.commit('setUserInfo', res.data)
        this.$store.commit('setIsLogin', true)
      } else {
        this.$dialog
          .confirm({
            title: '提示',
            message: '您当前没有登录,还不能发布评论,去登录'
          })
          .then(() => {
            this.$router.push('/login?redirect=' + this.$route.fullPath)
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    async token () {
      if (this.$store.state.isLogin) {
      } else if (getLocal('token')) {
        const res = await apiGetUser()
        this.$store.commit('setUserInfo', res.data)
        this.$store.commit('setIsLogin', true)
      } else {
        this.$router.push('/login?redirect=' + this.$route.fullPath)
        // this.$dialog
        //   .confirm({
        //     title: '提示',
        //     message: '您当前没有登录,还不能发布评论,去登录'
        //   })
        //   .then(() => {
        //     this.$router.push('/login?redirect=' + this.$route.fullPath)
        //   })
        //   .catch(() => {
        //     // on cancel
        //   })
      }
    },
    onamend (inde) {
      this.list[inde].reply_count++
    },
    // 对评论点赞
    async likeclick (item, dates, index) {
      this.token()
      const com = item.com_id.c[0] + '' + item.com_id.c[1]
      if (!dates) {
        const res = await apiAddCommentlikings(com)
        console.log(res)
        this.list[index].is_liking = true
        this.list[index].like_count++
      } else {
        this.list[index].is_liking = false
        this.list[index].like_count--
        const res2 = await apiAddCommentlikingsID(com)
        console.log(res2)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  width: 100%;
  .like_icon {
    color: red !important;
  }
  .back_top {
    position: fixed;
    bottom: 80px;
    right: 10px;
    font-size: 30px;
  }
  ::v-deep .hmNavBar .right {
    font-size: 22px;
  }
  .content {
    width: 100%;
    padding: @p15;
    .title {
      font-family: MicrosoftYaHei-Bold;
      font-size: 20px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 33px;
      letter-spacing: 1px;
      color: #3a3a3a;
    }
    .author {
      margin-top: 15px;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .f1 {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .f2 {
        flex: 1;
        margin-left: 10px;
        color: #b4b4b4;
        font-size: 12px;
        .nickname {
          color: #000000;
          font-size: 14px;
          margin-bottom: 3px;
        }
      }
      .f3 {
        margin-top: -10px;
        .van-button {
          border-radius: 15px;
          width: 85px;
          height: 29px;
          font-size: 14px;
          color: #000;
          font-size: 14px;
        }
      }
    }
    .txt {
      width: 100%;
      word-break: break-all;
      word-wrap: break-word;
      // overflow: hidden;
      font-family: MicrosoftYaHei;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 30px;
      letter-spacing: 0px;
      color: #222222;
      ::v-deep pre {
        overflow: auto;
      }
      ::v-deep img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom {
    width: 100%;
    position: fixed;
    bottom: -4px;
    left: 0;
    height: 60px;
    // .van-field__body {
    //   input {
    //     border: 1px solid #ccc;
    //     padding: 8px;
    //     border-radius: 25px;
    //   }
    // }
    .firld {
      padding: 0 15px;
      background-color: rgb(255, 255, 255);
      display: flex;
      font-size: 18px;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      .f1 {
        flex: 1;
        padding: 5px 10px 5px;
        background-color: rgb(248, 248, 248);
        margin-right: 15px;
        border-radius: 5px;
        font-size: 12px;
        color: #ccc;
        border: 1px solid rgb(175, 175, 175);
      }

      .f2 {
        .like_icon {
          color: red !important;
        }
      }
      .f2,
      .f3,
      .f4 {
        margin-top: 5px;
        margin-left: 15px;
      }
    }
  }
  .popup {
    .van-popup {
      padding: 10px 0;
      ::v-deep .van-field__control {
        background-color: #f4f4f4;
        padding: 10px;
        font-size: 16px;
        color: #000000;
        border-radius: 10px;
      }
      .van-field__body {
        border: 1px solid rgb(197, 197, 197);
        background-color: #fffafa;
        border-radius: 10px;
        padding: 10px;
        font-size: 16px;
        color: #ccc;
      }
      .p2 {
        position: relative;
        .van-button {
          position: absolute;
          right: 15px;
          top: 10px;
          border-radius: 15px;
          height: 30px;
        }
      }
    }
  }
  .comment {
    padding: 0 15px;
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    .image {
      .imageitem {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        background-color: blanchedalmond;
        .code {
          width: 100%;
          height: 100%;
        }
      }
    }
    .left {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .right {
      flex: 1;
      font-size: 14px;
      .r1 {
        display: flex;
        // color: #b4a9a0;
        align-items: center;
        line-height: 40px;
        justify-content: space-between;
        .van-icon {
          color: #3a3836;
          font-size: 18px;
        }
        .liks {
          display: flex;
          align-items: center;
        }
      }
      .r2 {
        font-size: 16px;
        line-height: 25px;
        margin-right: 15px;
        word-break: break-all;
        word-wrap: break-word !important;
      }
      .r3 {
        margin-top: 10px;
        display: flex;
        align-items: center;
        .r3-date {
          font-size: 12px;
          color: rgb(194, 193, 193);
          margin-right: 30px;
        }
        .r3-page {
          font-size: 14px;
          padding: 5px 15px;
          border-radius: 20px;
          background-color: #e4e4e4;
        }
      }
    }
  }
  .color {
    color: red !important;
  }
  .like_icon {
    color: red !important;
  }
  .like {
    padding: 0 @p15 10px;

    .like_top {
      margin-bottom: 10px;
      font-family: MicrosoftYaHei-Bold;
      font-size: 15px;
      font-weight: 600;
      font-stretch: normal;
      line-height: 33px;
      letter-spacing: 1px;
      color: #333333;
    }
    .like_item {
      display: flex;
      padding: 0 7px;
      justify-content: space-between;
      font-family: MicrosoftYaHei;
      font-size: 15px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 33px;
      letter-spacing: 1px;
      color: #666666;
    }
  }
  .btn {
    .like_icon {
      color: red !important;
    }
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    .van-button {
      text-align: center;
      margin: 0 30px;
      width: 100px;
      height: 29px;
      border-radius: 15px;
      border: solid 1px #eeeeee;
      .iconfont {
        font-size: 17px;
      }
      .van-button--normal {
        padding: 0 !important;
      }
    }
  }
}
</style>
